<template>
    <div class="file" :class="{'active' : DOC_ACTIVE_ID == apiValue.id}">
        <div class="file-box" @mousedown="keyDown($event)" @mouseup="keyUp($event)">
            <span class="state" :class="staticClass[apiValue.status]">
                <i class="el-icon-star-on"></i>
            </span>
            <span class="file-title">{{apiValue.title}}</span>
        </div>
        <div class="moveMark" v-if="markSetting.status && markSetting.type == 'doc'">
            <div class="TopMoveMark" @mouseover.stop="mouseover('TopMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="markSetting.status && (markSetting.moveValue.id == apiValue.id) && TopMoveMark"></moveLine>
            </div>
            <div class="BottomMoveMark" @mouseover.stop="mouseover('BottomMoveMark')" @mouseout.stop="mouseout">
                <moveLine v-if="markSetting.status && (markSetting.moveValue.id == apiValue.id) && BottomMoveMark"></moveLine>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
import moveLine from "./moveLine"
export default {
    components: {
        moveLine
    },
    props: ['apiValue', 'openParentFolder'],
    data() {
        return {
            staticClass: {
                'orange': 'text_orange',
                'blue': 'text_blue',
                'red': 'text_red',
                'green': 'text_green',
                'gray': 'text_gray',
                undefined: 'text_transparent',
                null: 'text_transparent',
            },
            TopMoveMark: false,
            BottomMoveMark: false
        }
    },
    watch: {
        DOC_ACTIVE_ID(newValue) {
            if (this.apiValue.id == newValue) {
                if (this.openParentFolder) {
                    this.openParentFolder();
                };
                this.treeScroll();
            };
        },
    },
    computed: {
        ...mapState("doc_tree", {
            DOC_ACTIVE_ID: state => state.DOC_ACTIVE_ID,
            markSetting: state => state.markSetting,
            tree: state => state.treeRef,
        }),
    },
    methods: {
        treeScroll() {
            setTimeout(() => {
                var elementTop = this.$el.getBoundingClientRect().top;
                var treePosition = this.tree.getBoundingClientRect()
                if (elementTop < 131) {
                    this.tree.scrollTo(0, elementTop - 131);
                } else if (elementTop > treePosition.height) {
                    this.tree.scrollTo(0, elementTop - 131);
                };
            }, 300);
        },
        mouseout() {
            if (this.markSetting.status) {
                this.$store.dispatch('doc_tree/setMoveOut');
            };
        },
        mouseover(type) {
            this.TopMoveMark = false;
            this.BottomMoveMark = false;
            this[type] = true;
            this.$store.dispatch('doc_tree/setMoveValue', {
                type: type,
                value: this.apiValue,
                moveValueType: 'doc'
            });
        },
        keyDown(event) {
            let X = event.clientX;
            let Y = event.clientY;
            document.onmousemove = (event) => {
                if (!this.markSetting.status) {
                    if (Math.abs(X - event.clientX) > 10 || Math.abs(Y - event.clientY) > 10) {
                        this.$store.dispatch('doc_tree/setMoveStatus', {
                            type: 'doc',
                            moveObject: this.apiValue,
                        });
                    };
                };
                this.$store.dispatch('doc_tree/setMoveSetting', {
                    x: event.clientX + 30,
                    y: event.clientY + 10,
                });
            };
            document.onmouseup = () => {
                this.$store.dispatch('doc_tree/clearMoveMark')
                if (this.markSetting.status) {
                    this.$store.dispatch('doc_tree/checkMove');
                };
                this.TopMoveMark = false;
                this.BottomMoveMark = false;
                document.onmousemove = null;
                document.onmouseup = null;
            };
        },
        keyUp(event) {
            if (event.button == 0) {
                this.show = !this.show;
                this.$store.dispatch('doc_tree/setActiveId', this.apiValue.id)
            } else if (event.button == 2) {
                this.$store.dispatch('doc_tree/closeShellMenu');
                this.$nextTick(() => {
                    this.$store.dispatch('doc_tree/showShellMenu', {
                        type: 'doc',
                        option: { X: event.clientX, Y: event.clientY },
                        object: this.apiValue
                    })
                });
            }
        },
    },


}
</script>

<style>

</style>